/**
 单独抽取出来的css文件
*/
// 引入字体图标
@import "font";

// 定义好基准单位
@rem:16rem;

/* 公共的通用样式 */

/* 去掉所有的默认空隙 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置字体大小和颜色 */
body {
    background-color: #ccc;
    color: #3c3c3c;
    font-size: 12/@rem;
}

/* 去掉列表的圆点 */
ul,ol,li {
    list-style: none;
}

img {
    vertical-align: middle;
}

/* 设置a标签的样式 */
a {
    color: #3c3c3c;
    text-decoration: none;
}

/* 浮动有关 */

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearBox::after {
    content: "上元教育";
    display: block;
    clear: both;
    width: 0;
    height: 0;
    overflow: hidden;
}

/*

 移动端的适配方案 
          1、 固定宽度法  弊端  只能应用于单一的设别  不能够用做设备的切换 

          2、 百分比的方法
          3、 flex 布局 
            2-3 的优缺点   只能适配宽度 高度无法适配

           4. rem 移动端适配方案

               em   相对去父元素字体大小倍数 
                
               rem  相对于根节点字体大小倍数

           4.1 rem 是一个单位 
               1rem    16px

               以iphone5 为开发基准  默认字体大小16像素   20rem就能够沾满整个宽度【适配任意屏幕 即为 20rem = 100%】
                    20rem = 320  16px
               切换了设备 宽度变宽  20rem=100%
                     20rem = 375   18.75px


            4.2 适配的时候 
               由像素   转为 rem 单位
               实际开发 美工  px 单位 
               px单位 转为  rem 


            iphone为基准 
                1rem   16px 
                20rem   ===  100%的宽度 

                320/16rem   ====  100%的宽度


*/


/*
  宽度和高度的适配

*/
@media only screen and (device-width:320px) {
    html {
        font-size: 16px;
    }

}

@media only screen and (device-width:375px) {
    html {
        font-size: 18.75px;
    }

}

@media only screen and (device-width:414px) {
    html {
        font-size: 20.7px;
    }

}

@media only screen and (device-width:360px) {
    html {
        font-size: 18px;
    }

}



// 头部样式
.head {
    width: 320/@rem;
    height: 40/@rem;
    line-height: 40/@rem;
   
    position: fixed;
    z-index: 99999999;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    &-home {
      width: 40/@rem;
      color: white;
      text-align: center;
      .iconfont {
          font-size: 18/@rem;
      }
    }
    &-search {
       width: 240/@rem;
     
       input {
           width: 100%;
           height: 30/@rem;
           border: none;
           outline: none;
       }
    }
    &-login{
       width: 40/@rem;
       text-align: center;
      
    }
}

// 底部tab 栏 

.foot {
    width: 320/@rem;
    height: 60/@rem;
    position: fixed;
    background-color: #fff;
    z-index: 99999999;
    bottom: 0;
    left: 0;
    right: 0;


    li {
        width: 20%;
        float: left;
        text-align: center;
        padding: 15/@rem 0 ;
    
         
    }
}

// 内容主体样式
.container {
    margin-top: 40/@rem;
    margin-bottom: 65/@rem;
}